<template>
	<view>
		<view>
		<u-avatar size="70" @click="popupShow=true" bg-color="gray" style="color: #F1F1F1;
				margin-left: 20rpx;
				" :text="mode.userInfo.nickname">
		</u-avatar>
			<image v-if="mode.isDayTime" @click="changeModeIsDayTime()" style="
							width: 50rpx;height: 50rpx;
							margin-right: 20rpx;
							float: right;" src="/static/moon.svg"></image>
		
			<image v-if="!mode.isDayTime" @click="changeModeIsDayTime()" style="width: 50rpx;height: 50rpx;
							margin-right: 20rpx;
							float: right;" src="/static/sun.svg"></image>
		
		</view>


		<u-popup
		 :style="mode.isDayTime?null:
		 'background-color:rgba(255,255,255,.2);'"
		 
		 v-model="popupShow">
			<view
			 class="in-popup"
			 :style="mode.isDayTime?'background-color:#FFFFFF':'background-color:#000000'"
			 >
				<image mode="widthFix" class="logo" :src="mode.isDayTime?'/static/logo.png':'/static/logo_moon.png'">
				</image>
				<view 
				:style="mode.isDayTime?'color: rgba(0, 0, 0, .54)':'color:rgba(255, 255, 255, .84);'"
				class="small-box">

					<view style="display: inline;">
						<view style="display: inline;margin-right: 20rpx;">用户昵称</view>
						{{mode.userInfo.nickname}}
					</view>
					<view style="height: 10rpx;"></view>
					<view style="display: inline;" v-show="mode.userInfo.phoneNumber!=null&&mode.userInfo.phoneNumber!=''">
						<u-icon name="phone" style="margin-right: 20rpx;"></u-icon>{{mode.userInfo.phoneNumber}}
					</view>
					<view style="height: 20rpx;
					border-bottom: 1rpx solid gray;
					"></view>
					<view style="text-align: right;">
						<view>
							<view 
							@click="toUpdateUserInfo()"
							style="
							display: inline;
							font-size: 10rpx;
							">修改个人信息</view>
						</view>
					</view>
	
					<view style="height: 20rpx;"></view>
					<view @click="toHistoryPage()">
						<u-icon style="margin-right: 20rpx;" name="order"></u-icon>
						搜索记录
					</view>
					<view style="height: 20rpx;"></view>
					<view
					 v-if="isAdmin()"
					 @click="toKeywordsPage()">
						<u-icon style="margin-right: 20rpx;" name="attach"></u-icon>
						添加关键词
					</view>
					<view style="height: 20rpx;"></view>
<!-- 					<view>
						<u-icon style="margin-right: 20rpx;" name="more-circle-fill"></u-icon>
						帮助
					</view> -->
					
					<view 
					class="small-box-2"
					:style="mode.isDayTime?'background-color: #007AFF;':
					'background-color:#8a8a8a;box-shadow: 0 0 100rpx #000000;'"
					
					>
						<view 
						@click="loginOut()"
						style="
							color: #F1F1F1;
							display: inline;
							position: absolute;
							bottom: 20rpx;
							font-size: 25rpx;
							font-weight: bold;
							right: 20rpx;
						">
							<image style="width: 35rpx;height: 35rpx;" src="../../static/login_out.svg"></image>
							退出登录
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var Request = getApp().globalData.Request;
	var Api = getApp().globalData.Api;
	
	export default {
		props: ["mode"],
		data() {
			return {
				popupShow: false
			}
		},
		onShow() {
			
		},
		mounted() {
			
		},
		methods: {
			// 判断是否为管理员
			isAdmin(){
				
				for(var i=0;i<this.mode.userInfo.roles.length;i++){
					if("ROLE_admin"==this.mode.userInfo.roles[i].name){
						return true;
					}
				}
				return false;
			},
			toKeywordsPage(){
				uni.navigateTo({
					url:"/pages/keywords/keywords"
				})
			},
			toUpdateUserInfo(){
				uni.navigateTo({
					url:"/pages/update-user-info/update-user-info"
				})
			},
			toHistoryPage(){
				uni.navigateTo({
					url:"/pages/history/history"
				})
			},
			loginOut() {
				Request.request(this, {
					url: Api.user.loginOut,
					success: (res) => {
						if (Request.isSuccess(res)) {
							
							this.$refs.uToast.show({
								title: res.data.msg
							});
			
							setTimeout(() => {
								uni.navigateTo({
									url: "/pages/login/login"
								})
							}, 600);
			
							return false;
						}
			
						this.$refs.uToast.show({
							title: res.data.errMsg
						});
			
					}
				});
			},
			changeModeIsDayTime(){
				this.mode.isDayTime=!this.mode.isDayTime;
				var json={value:this.mode.isDayTime,
							time: Date.now() / 1000, 
							expire: 0 };
				uni.setStorageSync('isDayTime',JSON.stringify(json));
			}
		}
	}
</script>

<style>
	.logo {
		/* 1rpx 是 页面宽度的 1/750 */
		width: 240rpx;
		padding: 20rpx 0 30rpx 0;
		margin-left: 50%;
		transform: translate(-50%);
	}

	.small-box {
		padding: 0rpx 30rpx 30rpx 20rpx;
		font-size: 35rpx;
	}
	
	.in-popup{
		position: relative;
		width: 500rpx;
		height: 100vh;
		padding: 30rpx;box-sizing: border-box;
	}
	
	.small-box-2{
		position: absolute;
		width: 100%;
		right: 0;
		top: 500rpx;
		border-radius: 300rpx 0 0 0;
		height: calc(100vh - 500rpx);
	}
</style>
